import React from 'react'
import PropTypes from 'prop-types';
import clsx from 'clsx';
import { makeStyles, useTheme } from '@material-ui/core/styles';
import { Grid, Typography } from '@material-ui/core';
import { Image } from 'components/atoms';
import TitleText from '../TitleText';
import { formatDate } from 'utils/util';
import { useHistory } from 'react-router-dom/cjs/react-router-dom.min';
import { setProductionItem } from 'redux/actions/PublicationActions'
import { useDispatch, useSelector } from 'react-redux'

const useStyles = makeStyles(theme => ({
    root: {
        width: "100%",
    },
    typography: {
        textAlign: "left",
        fontFamily: "HurmeGeometricSans3-Black",
        fontSize: "10px",
        fontStyle: "normal",
        fontWeight: 700,
        marginTop: "30px",
        textTransform: "uppercase",
        color: "#7E53F9",
        letterSpacing: "3px",
        [theme.breakpoints.up('md')]: {
            fontSize: "16px",
            letterSpacing: "0"
        },
    },
    typography1: {
        color: "#000",
        fontSize: "18px",
        lineHeight: "30px",
        margin: "20px 0",
        letterSpacing: "0",
        overflow: "hidden",
        // whiteSpace:"nowrap",
        textTransform: "none",
        textOverflow: "ellipsis",
        width: "100%",
        height: "180px",
        [theme.breakpoints.up('md')]: {
            fontSize: "20px",
        },
    },
    typography2: {
        color: "#757575",
        lineHeight: "20px",
        fontSize: "14px",
        textTransform: "capitalize",
        letterSpacing: "0"
    },
    typography3: {
        marginLeft: "30px"
    },
    grid: {
        padding: "0 20px",
        [theme.breakpoints.up('md')]: {
            padding: "0 80px",
        },
    },
    gridItem: {
        display: "none",
        [theme.breakpoints.up('md')]: {
            display: "flex",
        },
    },
    gridItem1: {
        position: "relative",
        height: "300px",
        overflow: "hidden",
        [theme.breakpoints.up('sm')]: {
            height: "500px",
        },
        [theme.breakpoints.up('md')]: {
            height: "200px",
        },
        [theme.breakpoints.up('lg')]: {
            height: "300px",
        },
    },
    gridItem2: {
        cursor: "pointer",
    },
    newsTitle: {
        padding: "20px 0",
        [theme.breakpoints.up('md')]: {
            padding: "70px 0",
        },
    },
    viewAll: {
        padding: "50px 0",
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
        [theme.breakpoints.up('md')]: {
            padding: "80px 0",
        },
    },
    button: {
        color: "#000",
        fontSize: "16px",
        padding: "28px 100px",
        border: "1px solid #9B9B9B",
        lineHeight: "18px",
        cursor: "pointer",
        fontWeight: 700,
        [theme.breakpoints.up('md')]: {
            padding: "12px 50px",
            fontSize: "10px",
        },
    },
    image: {
        position: "absolute",
        top: 0,
        left: 0,
        bottom: 0,
        right: 0,
        margin: "auto",
        width: "100%",
        height: "300px",
        [theme.breakpoints.up('sm')]: {
            height: "500px",
        },
        [theme.breakpoints.up('md')]: {
            height: "300px",
        },
    },
    img: {
        objectFit: "cover",
    }
}));

const News = () => {
    const classes = useStyles();

    const NewsData = useSelector((state) => state.cover.discovers?.news);

  const history = useHistory();
  const dispatch = useDispatch()

  const moveDetailPage = (item) => {
    dispatch(setProductionItem(item));
    history.push(`publication/${item.id}`);
}

    return (
        <div className={classes.root}>
            <div className={classes.newsTitle}>
                <TitleText text={"NEWS"} />
            </div>
            <Grid container justifyContent="space-between" className={classes.grid}>
                {NewsData && NewsData.map((item, index) => (
                    <Grid item container xs={index == 0 ? 12 : 1} md={3} key={index} className={clsx(
                        index > 0 ? classes.gridItem : "",
                        classes.gridItem2)} onClick={()=>moveDetailPage(item)}>
                        <Grid item xs={12} className={classes.gridItem1}>
                            <div className={classes.image}>
                                <Image
                                    src={item.media_link}
                                    alt={item.media_link}
                                    srcSet={item.media_link}
                                    lazyProps={{ width: '100%', height: '100%' }}
                                    className={classes.img}
                                />
                            </div>
                        </Grid>
                        <Grid item container justifyContent="center" alignItems="flex-start" direction="column" xs={12}>
                            <Typography className={clsx(classes.typography)}>{item.title}</Typography>
                            <Typography className={clsx(classes.typography, classes.typography1)}>{item.content}</Typography>
                            <div>
                                <Typography component={"span"} className={clsx(classes.typography, classes.typography2)}>by admin {item.author}</Typography>
                                <Typography component={"span"} className={clsx(classes.typography, classes.typography2, classes.typography3,)}>{formatDate(item.created_at, "yyyy-MM-dd")}</Typography>
                            </div>
                        </Grid>
                    </Grid>
                ))}
            </Grid>

            <div className={classes.viewAll}>
                <div className={classes.button} onClick={() => history.push("/discover/all",0)}>VIEW ALL</div>
            </div>

        </div>
    )
}


News.propTypes = {
    /**
     * External classes
     */
    className: PropTypes.string,
};


export default News
